{% extends "base_generic.html" %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <h1>{% trans "My Favorite Books" %}</h1>

    <div class="mb-3">
        <a href="{% url 'catalog:export_favorites_csv' %}" class="btn btn-info">{% trans "Export to CSV" %}</a>
        <a href="{% url 'catalog:export_favorites_excel' %}" class="btn btn-success">{% trans "Export to Excel" %}</a>
    </div>

    {% if page_obj %}
    <form method="post" action="{% url 'catalog:my-favorites' %}?sort={{ sort }}&order={{ order }}" id="batch-form">
        {% csrf_token %}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="btn-group" role="group" aria-label="Batch actions">
                <button type="button" class="btn btn-outline-secondary" id="select-all-btn">{% trans "Select All" %}</button>
                <button type="button" class="btn btn-outline-secondary" id="deselect-all-btn">{% trans "Deselect All" %}</button>
            </div>

            <div class="d-flex align-items-center">
                <label for="group-select" class="me-2 mb-0">{% trans "Move to Group:" %}</label>
                <select name="move_group_id" id="group-select" class="form-select me-2">
                    <option value="">{% trans "No Group" %}</option>
                    {% for group in favorite_groups %}
                        <option value="{{ group.id }}">{{ group.name }}</option>
                    {% endfor %}
                </select>
                <button type="submit" name="batch_move" class="btn btn-primary me-2">{% trans "Batch Move" %}</button>
                <button type="submit" name="batch_unfavorite" class="btn btn-danger">{% trans "Batch Unfavorite" %}</button>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="sortMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    {% trans "Sort by" %}
                </button>
                <ul class="dropdown-menu" aria-labelledby="sortMenuButton">
                    <li><a class="dropdown-item" href="{% url 'catalog:my-favorites' %}?sort=created_at&order=desc">{% trans "Date Added (Newest First)" %}</a></li>
                    <li><a class="dropdown-item" href="{% url 'catalog:my-favorites' %}?sort=created_at&order=asc">{% trans "Date Added (Oldest First)" %}</a></li>
                    <li><a class="dropdown-item" href="{% url 'catalog:my-favorites' %}?sort=title&order=asc">{% trans "Title (A-Z)" %}</a></li>
                    <li><a class="dropdown-item" href="{% url 'catalog:my-favorites' %}?sort=title&order=desc">{% trans "Title (Z-A)" %}</a></li>
                    <li><a class="dropdown-item" href="{% url 'catalog:my-favorites' %}?sort=author&order=asc">{% trans "Author (A-Z)" %}</a></li>
                    <li><a class="dropdown-item" href="{% url 'catalog:my-favorites' %}?sort=author&order=desc">{% trans "Author (Z-A)" %}</a></li>
                </ul>
            </div>
        </div>

        <div class="row row-cols-1 row-cols-md-3 g-4">
            {% for book in page_obj.object_list %}
            <div class="col">
                <div class="card h-100 shadow-sm">
                    <div class="position-relative">
                        <input type="checkbox" name="unfavorite_ids" value="{{ book.id }}" class="form-check-input position-absolute top-0 start-0 m-2 batch-checkbox">
                        {% if book.image %}
                            <img src="{{ book.image.url }}" class="card-img-top" alt="{{ book.title }} {% trans 'Cover' %}" style="height: 200px; object-fit: contain; padding: 10px;">
                        {% else %}
                            <img src="{% static 'images/default_book_cover.png' %}" class="card-img-top" alt="{% trans 'Default Cover' %}" style="height: 200px; object-fit: contain; padding: 10px;">
                        {% endif %}
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title text-center"><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h5>
                        <p class="card-text text-muted text-center">{{ book.author }}</p>
                        {% if book.favorite_group_name %}
                            <p class="card-text text-center"><span class="badge bg-secondary">{{ book.favorite_group_name }}</span></p>
                        {% else %}
                            <p class="card-text text-center"><span class="badge bg-light text-muted">{% trans "Uncategorized" %}</span></p>
                        {% endif %}
                        <div class="mt-auto d-grid gap-2">
                            <a href="{% url 'catalog:unfavorite-book' book.pk %}" class="btn btn-outline-danger btn-sm">{% trans "Remove from Favorites" %}</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&sort={{ sort }}&order={{ order }}">{% trans "Previous" %}</a></li>
                {% endif %}
                <li class="page-item disabled"><span class="page-link">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}</span></li>
                {% if page_obj.has_next %}
                    <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&sort={{ sort }}&order={{ order }}">{% trans "Next" %}</a></li>
                {% endif %}
            </ul>
        </nav>
    </form>
    {% else %}
    <p class="text-muted">{% trans "You have not favorited any books yet." %}</p>
    {% endif %}
</div>

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllBtn = document.getElementById('select-all-btn');
    const deselectAllBtn = document.getElementById('deselect-all-btn');
    const batchCheckboxes = document.querySelectorAll('.batch-checkbox');
    const batchForm = document.getElementById('batch-form');

    if (selectAllBtn) {
        selectAllBtn.addEventListener('click', function() {
            batchCheckboxes.forEach(checkbox => {
                checkbox.checked = true;
            });
        });
    }

    if (deselectAllBtn) {
        deselectAllBtn.addEventListener('click', function() {
            batchCheckboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
        });
    }

    // Prevent form submission if no checkboxes are selected for batch actions
    if (batchForm) {
        batchForm.addEventListener('submit', function(event) {
            const submitter = event.submitter; // Get the button that triggered the submit
            if (submitter && (submitter.name === 'batch_unfavorite' || submitter.name === 'batch_move')) {
                const checkedCount = Array.from(batchCheckboxes).filter(checkbox => checkbox.checked).length;
                if (checkedCount === 0) {
                    alert('{% trans "Please select at least one book for this action." %}');
                    event.preventDefault(); // Stop the form submission
                }
            }
        });
    }
});
</script>
{% endblock %}